<template>
  <el-row class="el-tabs">
    <el-col v-for="item in menuList" :key="item.link" :span="4" justify="space-around" :class="route.path === item.link ? 'active' : ''">
      <nuxt-link :to="item.link"
                 style="color: white; text-decoration: none; display: block; width: 100%; height: 100%;">
        {{ item.label }}
      </nuxt-link>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
const menuList = ref([
  { label: "首页", link: "/home" },
  { label: "图书室概况", link: "/home/about" },
  { label: "资源推荐", link: "/home/bookMarket" },
  { label: "读者指南", link: "/home/reference" },
  { label: "读者荐购", link: "/home/userSuggestion" },
  { label: "个人中心", link: "/home/userCenter" }
]);
const route = useRoute();
</script>

<style scoped>
.el-row {
  background-color: var(--main-background);
  height: 50px;
  border-radius: 5px;
}

.el-col {
  cursor: pointer;
  font-family: STKaiti, serif;
  text-align: center;
  padding: 14px 0;
  font-weight: bold;
  font-size: 18px;
  color: white;
}

.el-col:hover {
  background: var(--second-background);
}

.el-col.active{
  background: var(--second-background);
}

</style>